<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" class="u-m-b-12" :fixed="false" title="物流信息" placeholder bgColor="#fff"></u-navbar>
    <view class="content">
      <view class="node-list">
        <view class="node-item" v-for="(item, index) in list" :key="index">
          <view class="u-flex u-m-b-16">
            <template>
              <view class="u-font-24" style="color: #333333;" :style="index == 0 ?'color: #56CB03;':''" v-if="list.length==1">已发货</view>
              <view class="u-font-24" style="color: #56CB03;" v-if="index == 0 && rawTracking.status == '1'" >已签收</view>
              <view class="u-font-24" style="color: #333333;" :style="index == 0 ?'color: #56CB03;':''" v-else>运送中</view>
            </template>
            <template>
              <view class="icon" :style="index == 0 ?'background-color: #56CB03;':''" v-if="index == list.length-1">发</view>
              <view class="icon" v-else-if="index == 0 && rawTracking.status == '1'" style="color: #fff;background-color: #56CB03;">收</view>
              <view class="node-icon" :style="index == 0 ?'background-color: #56CB03;':''" v-else></view>
            </template>
            <template>
              <view class="u-font-24" style="color: #818181;" :style="index == 0 ?'color: #56CB03;':''">{{ item.time }}</view>
            </template>
          </view>
          <view class="u-font-24" style="padding-left: 166rpx;color: #818181;" :style="index == 0 ?'color: #56CB03;':''">
            {{ item.context }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getQueryTrack } from '@/api/index'

export default {
  data() {
    return {
      orderId: '',
      carrier: '',
      trackingNo: '',
      rawTracking: {},
      list: [],
    };
  },
  onLoad(options) {
    if(options.orderId) {
      this.orderId = options.orderId
      this.carrier = options.carrier
      this.trackingNo = options.trackingNo
      this.getPage()
    }
  },
  methods: {
    getPage() {
      const parameter = {
        orderId: this.orderId,
        carrier: this.carrier,
        trackingNo: this.trackingNo,
      }
      getQueryTrack(parameter).then(res => {
        if(res.data && res.data.rawTracking) {
          this.rawTracking = JSON.parse(res.data.rawTracking)
          this.list = JSON.parse(res.data.rawTracking).data
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .content {
    width: 702rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    padding: 26rpx 20rpx;
    margin: 0 auto;
    .node-list {
      display: flex;
      flex-direction: column;
      gap: 48rpx;
      .node-item {
        .icon {
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #818181;
          font-size: 24rpx;
          background-color: #D9D9D9;
          margin-right: 24rpx;
          margin-left: 20rpx;
        }
        .node-icon {
          width: 16rpx;
          height: 16rpx;
          background-color: #D9D9D9;
          transform: rotate(45deg);
          margin-right: 40rpx;
          margin-left: 32rpx;
        }
      }
    }
  }
}

</style>
